<template>
	<table class="table table-sm table-bordered">
		<thead>
			<tr>
				<th scope="col" class="text-center " 
				:rowspan="th.rowspan" :colspan="th.colspan" 
				style="vertical-align: middle;"
				v-for="(th,thi) in tableThs" :key="thi">{{th.name}}</th>
				
			</tr>
			<tr>
				<th scope="col" class="text-center "
				rowspan="1" colspan="1" 
				style="vertical-align: middle;"
				v-for="(th,thi) in skuLabels" :key="thi">{{th.name}}</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(item, index) in list" :key="index">
				<th width="100" scope="row" v-for="(sku, skuI) in item.skus" :key="skuI">
					{{sku.value}}
				</th>
				<td class="text-center" width="80">
					<span v-if="!item.image" class="btn btn-light border mr-2"
					@click="chooseImage(item)">
						<i class="el-icon-plus"></i>
					</span>
					<img v-else class=" rounded" :src="item.image" 
					style="width: 80px;cursor: pointer;" 
					@click="chooseImage(item)"/>
				</td>
				<td class="text-center" width="80">
					<input type="number" v-model="item.pprice" class="form-control text-center" />
				</td>
				<td class="text-center">
					<input type="number" v-model="item.oprice" class="form-control text-center" />
				</td>
				<td class="text-center">
					<input type="number" v-model="item.cprice" class="form-control text-center" />
				</td>
				<td class="text-center">
					<input type="number" v-model="item.stock" class="form-control text-center" />
				</td>
				<td class="text-center">
					<input type="number" v-model="item.volume" class="form-control text-center" />
					</td>
				<td class="text-center">
					<input type="number" v-model="item.weight" class="form-control text-center" />
				</td>
				<td class="text-center">
					<input type="text" v-model="item.code" class="form-control text-center" />
				</td>
			</tr>
		</tbody>
	</table>
</template>

<script>
	import {mapGetters,mapState} from "vuex";
	export default {
		inject: ['app'],
		
		data() {
			return {
				list: []
			}
		},
		
		computed: {
			...mapGetters(['tableThs', 'tableData', 'skuLabels']),
			...mapState({
				sku_card: state => state.goodsCreate.sku_card
			}),
			
		},
		
		//监听
		watch: {
			tableData(newValue, oldValue) {
				this.list = newValue
			}
		},
		
		mounted() {
			this.list = this.tableData
			console.log(this.list)
		},
		
		methods: {
			//选择图片
			chooseImage(item) {
				this.app.showImageModel((res) => {
					item.image = res[0].url
				}, 1)
			}
		}
	}
</script>

<style></style>
